FE Notes
Search K

Appearance

01 Vue 快速上手 ​

为什么要学习 Vue ​

  1. 前端必备技能
  2. 岗位多，绝大互联网公司都在使用 Vue
  3. 提高开发效率
  4. 高薪必备技能（Vue2 + Vue3）

Vue 概念 ​

  • 概念：Vue (读音 /vjuː/，类似于 view) 是一套 构建用户界面 的 渐进式 框架
  • Vue2 官网：Vue.js

什么是构建用户界面 ​

基于数据渲染出用户可以看到的界面

什么是渐进式 ​

  • 所谓渐进式就是循序渐进，不一定非得把 Vue 中的所有 API 都学完才能开发 Vue，可以学一点开发一点

Vue 的两种开发方式 ​

  1. Vue 核心包开发

    场景：局部模块改造

  2. Vue 核心包 & Vue 插件 & 工程化

    场景：整站开发

什么是框架 ​

  • 所谓框架：就是一套完整的解决方案

举个栗子

  • 如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。

  • 我们只需要在 "毛坯房" 的基础上，增加功能代码即可。

  • 提到框架，不得不提一下库。

    • 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts 等
    • 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

    0b4e7d89-7b7a-4964-82d9-908c9961e7d1

  • 框架的特点：有一套必须让开发者遵守的规则或者约束。学框架就是学习的这些规则

总结 ​

  1. Vue 是什么
    • Vue 是一个用于 构建用户界面 的 渐进式 框架
  2. 什么是构建用户界面
    • 基于 数据 动态 渲染 页面
  3. 什么是渐进式
    • 循序渐进的学习
  4. 什么是框架
    • 一套完整的项目解决方案，提升开发效率 ↑ (理解记忆规则，规则可以查看官网)

创建实例 ​

  1. 准备容器
  2. 引包（官网） — 开发版本 vue.js /生产版本 vue.min.js
  3. 创建 Vue 实例 new Vue()
  4. 指定配置项，渲染数据
    • el 指定挂载点
    • data 提供数据
创建 vue 实例
html
<!--
  创建 Vue 实例，初始化渲染
  1. 准备容器 (Vue 所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染
-->

<!-- 准备容器，设置挂载点 -->
<div id="app">{{ msg }}</div>

<!-- 引入 vue.js -->
<script src="./js/vue.js"></script>

<script>
  // 创建 vue 实例
  var vm = new Vue({
    el: "#app", // 挂载元素
    data: {
      // 数据
      msg: "hello world",
    },
  })
</script>

插值表达式 ​

插值表达式是一种 Vue 的模板语法，我们可以用插值表达式渲染出 Vue 提供的数据。

插值表达式作用 ​

  • 作用：利用表达式进行插值，渲染到页面中
  • 表达式：是可以被求值的代码，JS 引擎会讲其计算出一个结果

以下的情况都是表达式：

js
money + 100;
money - 100;
money * 10;
money / 10;
price >= 100 ? '真贵' : '还行';
obj.name;
arr[0];
fn();
obj.fn();

插值表达式语法 ​

插值表达式语法：

html
{{ 表达式 }}
jsx
<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

插值表达式错误用法 ​

  1. 在插值表达式中使用的数据 必须在 data 中进行了提供

    jsx
    <p>{{ hobby }}</p>; //如果在 data 中不存在，则会报错

const app = new Vue({
  el: '#app',
  data: {
    name: 'zs',
    age: 18,
  },
});

  2. 支持的是表达式，而非语句，比如：if for …

    jsx
    <p>{{if}}</p> // 报错：不支持 if 关键字

  3. 不能在标签属性中使用 插值 (插值表达式只能标签中间使用)

    jsx
    <p title='{{username}}'>我是 P 标签</p> // 报错：不能在标签属性中使用插值表达式
插值表达式
html
<!--
  插值表达式：Vue 的一种模板语法
  作用：利用 表达式 进行插值渲染
  语法：{{ 表达式 }}

  注意点：
    1. 使用的数据要存在
    2. 支持的是表达式，不是语句  if  for
    3. 不能在标签属性中使用 {{ }}
-->

<div id="app">
  <p>{{ nickname }}</p>
  <p>{{ nickname.toUpperCase() }}</p>
  <p>{{ nickname + '你好' }}</p>
  <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
  <p>{{ friend.name }}</p>
  <p>{{ friend.desc }}</p>

  <!-- <p>{{ hobby }}</p> -->
  <!-- <p>{{ if }}</p> -->
  <!-- <p title="{{ nickname }}">我是 p 标签</p> -->
</div>

<script src="./js/vue.js"></script>

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      nickname: "coderwhy",
      age: 18,
      friend: {
        name: "kobe",
        desc: "黑曼巴",
      },
      hobby: ["打球", "唱歌", "跳舞"],
    },
  });
</script>

总结 ​

  1. 插值表达式的作用是什么

    • 利用表达式进行插值，将数据渲染页面中

  2. 语法是什么

    html
    {{ 表达式 }}

  3. 插值表达式的注意事项

    • 使用的数据要存在（data）
    • 支持的是表达式，而非语句 if、for 等 JS 关键字
    • 不能在标签属性里面使用

响应式特性 ​

什么是响应式 ​

简单理解就是数据变，视图对应变。

响应式演示 ​

data 中的数据，最终会被添加到实例上

  • 访问数据： 实例.属性名
  • 修改数据： 实例.属性名=值

6bd7c9fb-6a5e-48d9-acde-b65b991437f7

响应式
html
<div id="app">{{ msg }} {{ count }}</div>

<script src="./js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      msg: "hello world",
      count: 100,
    },
  });

  // data 中的数据，是会被添加到实例上
  // 1. 访问数据 app.msg
  // 2. 修改数据 app.count++

  console.log(app);
  console.log(app.msg);
  console.log(++app.count);
</script>

总结 ​

  1. 什么是响应式

    • 数据改变，视图自动更新
    • 使用 Vue 开发 → 专注于业务核心逻辑 即可

  2. 如何访问和修改 data 中的数据呢

开发者工具 ​

安装之后可以 F12 后看到多一个 Vue 的调试面板 (可以根据自己习惯将调试面板拖拽到左侧)